<template>
  <div class="proMeg">
    <!-- <div class="proMeg_tit"> -->
    <gl-breadcrumb class="mb15"
                   text="软件应用管理"></gl-breadcrumb>
    <!-- </div> -->
    <div class="proMeg_main">
      <div class="proMeg_main_nav">
        <el-select class="mr20"
                   clearable
                   v-model="customer_id"
                   @change="getList()"
                   placeholder="请选择客户">
          <el-option v-for="item in customerList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select class="mr20"
                   clearable
                   v-model="type"
                   @change="getList()"
                   placeholder="请选择类型">
          <el-option v-for="item in typeList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <el-input class="mr20"
                  v-model="proName"
                  style="width:200px"
                  placeholder="请输入应用名称"></el-input>
        <div>
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="getList()">
            搜索
          </el-button>
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="add">
            新建
          </el-button>
        </div>
      </div>
      <div class="proMeg_main_box">
        <gl-table @button="buttonClick"
                  :data="data"
                  :columns="columns">
        </gl-table>
        <gl-pagination :curr="curr"
                       :size="pageSize"
                       :total="total"
                       @callback="getList"></gl-pagination>
      </div>
    </div>
    <Gldelbtn :show="showDel"
              :text="dialogText"
              @cancel="closeDel"
              @determine="determine"></Gldelbtn>
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVis"
               :before-close="handleClose">
      <gl-form :form="form"
               :formLabel="formLabel"
               :must="must"
               ref="glForm"
               @showPreview="showPreview"
               @removeImg="removeImg"
               limit="1"
               @upload="uploadSucc">
      </gl-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVis = false">取 消</el-button>
        <el-button type="primary"
                   @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'softwareMeg',
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      company_id: '',
      customerList: [], //客户下拉列表
      customer_id: '',
      typeList: [
        { label: '家长端', value: '1' },
        { label: '设备端', value: '2' }
      ], //状态列表
      type: '',
      proName: '',
      data: [],
      columns: [
        { label: '应用编号', prop: 'id' },
        { label: '应用名称', prop: 'name' },
        { label: '应用类型', prop: 'apk_type_name' },
        { label: '所属客户', prop: 'customer_name' },
        { label: '关联产品数', prop: 'product_num' },
        {
          label: '更新时间',
          prop: 'update_time',
          format: value => this.tools.formatDate(value)
        },
        { label: '操作', btns: ['编辑', '删除'], class: 'btn' }
      ],
      curr: 1,
      limits: 10,
      total: 0,
      dialogVis: false,
      dialogTitle: '',
      form: {
        name: '',
        apk_type: '',
        is_forced_update: '',
        icon: '',
        fileIcon: '',
        description: ''
      },
      formLabel: [
        { label: '应用名称：', prop: 'name', placeholder: '请输入' },
        {
          label: '应用类型：',
          prop: 'apk_type',
          options: [
            { label: '设备端', value: '2' },
            { label: '家长端', value: '1' }
          ]
        },
        {
          label: '强制更新：',
          radio: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
          prop: 'is_forced_update',
          placeholder: '请输入'
        },
        {
          label: '应用icon：',
          prop: 'icon',
          type: 'upload',
          limit: '1'
        },
        {
          label: '应用描述：',
          prop: 'description',
          type: 'textarea',
          placeholder: '请输入',
          text: 'ueditor'
        }
      ],
      must: 'name,apk_type,icon,fileIcon',
      showDel: false,
      dialogText: '',
      iconsavepath: '',
      app_id: ''
    }
  },
  created() {
    this.company_id = this.userInfo.company_id
    this.getList()
    this.getCustomersList()
  },
  methods: {
    removeImg() {
      // console.log(this.form);
      this.form.icon = ''
      this.iconsavepath = ''
    },
    showPreview(file) {
      //   console.log(file)
    },
    editSubmit() {
      console.log(this.form)
      if (this.$refs.glForm.validate()) {
        this.http
          .$post('admin/app.api/add', {
            name: this.form.name,
            description: this.form.description,
            create_name: this.userInfo.id,
            icon: this.iconsavepath,
            is_forced_update: this.form.is_forced_update,
            apk_type: this.form.apk_type
          })
          .then(r => {
            // console.log(r)
            this.dialogVis = false
            this.form = {}
            this.getList()
          })
          .catch(this.$err)
      } else {
        return this.$message.error('请确认输入是否完整无误')
      }
    },
    uploadSucc(res, prop) {
      // console.log(res,prop);
      this.iconsavepath = res.savepath
      //   this.form.icon = res.savepath
    },
    getList(obj) {
      if (obj) {
        this.curr = obj.curr
        this.limits = obj.size
      } else {
        this.curr = 1
        this.limits = 10
      }
      this.http
        .$post(
          'admin/app.api/get_list',
          {
            customer_id: this.customer_id,
            apk_type: this.type,
            keyword: this.proName,
            curr: this.curr,
            limits: this.limits
          },
          { loading: true }
        )
        .then(r => {
          //   console.log(r)
          this.total = r.total
          this.data = r.list
        })
        .catch(this.$err)
    },
    getCustomersList() {
      this.http
        .$post('admin/customer.api/list_customers', {
          company_id: this.company_id
        })
        .then(r => {
          //   console.log(r)
          this.customerList = r
        })
        .catch(this.$err)
    },
    closeDel() {
      this.showDel = false
    },
    determine(code, Vcode) {
      //   console.log(code, Vcode)
      if (code === Vcode) {
        this.delApp(this.app_id)
      } else {
        this.$message.error('验证码错误，请确认后重新输入')
      }
    },
    buttonClick(obj) {
      //   console.log(obj)
      this.app_id = obj.row.id
      if (obj.index * 1 === 1) {
        this.dialogText = obj.row.name
        this.showDel = true
      } else {
        // console.log('push New Router')
        this.$router.push({
          path: '/product/softwareMeg/appDetail',
          query: {
            id: obj.row.id
          }
        })
      }
    },
    delApp(app_id) {
      this.http
        .$post('admin/app.api/del', {
          app_id
        })
        .then(r => {
          //   console.log(r)
          this.showDel = false
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(this.$err)
    },
    add() {
      //   console.log(this.form)
      this.dialogVis = true
      this.dialogTitle = '创建软件应用'
      this.$refs.glForm && this.$refs.glForm.clearValidate()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  border-bottom: 1px solid #ddd;
}
.proMeg {
  // background-color: #fff;
  .proMeg_tit {
    padding: 15px 0 15px 25px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .proMeg_main {
    padding: 20px 25px;
    background-color: #fff;
    .proMeg_main_nav {
      display: flex;
    }
    .proMeg_main_box {
      margin-top: 20px;
      /deep/ .el-table .cell {
        .el-button--text {
          &.btn {
            margin: 0;
            span {
              padding: 0 5px;
              border-right: 1px solid #66b1ff;
            }
            &:last-child {
              span {
                border: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>